import React from 'react';
import ReactDOM from 'react-dom';

class Toggle  extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isToggleOn:true,
        }
    }
    handleClick(){
        console.log('this is:', this);
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return(
          <button onClick={this.handleClick.bind(this)}>
              {this.state.isToggleOn?'ON':'OFF'}
          </button>
        );
    }
}
class LoggingButton extends React.Component {
    // 这个语法确保了 `this` 绑定在  handleClick 中
    // 这里只是一个测试
    handleClick = () => {
        console.log('this is:', this);
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                Click me
            </button>
        );
    }
}
class LoggingButton1 extends React.Component {
    handleClick() {
        console.log('this is:', this);
    }

    render() {
        //  这个语法确保了 `this` 绑定在  handleClick 中
        return (
            <button onClick={(e) => this.handleClick(e)}>
                Click me
            </button>
        );
    }
}
class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }

    preventPop(name, e){    //事件对象e要放在最后
        console.log(e)
        console.log(this)
        e.preventDefault();
        alert(name);
    }

    render(){
        return (
            <div>
                <p>hello</p>
                {/* 通过 bind() 方法传递参数。 */}
                <a href="https://reactjs.org" onClick={this.preventPop.bind(this,this.state.name)}>Click</a>
            </div>
        );
    }
}
ReactDOM.render(
    <Popper/>,
    document.getElementById('root')
);
